<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <style>
      .form-select {
        width: 103px;
        display: inline-block;
      }

      .col-form-label {
        text-align: right;
      }

      .figure-img {
        width: 100px;
        height: 100px;
      }

      #upload {
        display: none;
      }

      .figure-caption {
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <h1 class="p-5">个人设置</h1>
      <form class="col-6">
        <div class="row mb-3">
          <label class="col-form-label col-3">用户名：</label>
          <div class="col-7">
            <input id="username" disabled class="form-control col-9" type="text" />
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-form-label col-3">籍贯：</label>
          <div class="col-9">
            <select class="form-select col-4" name="province">
              <option value="">--省--</option>
            </select>
            <select class="form-select col-4" name="city">
              <option value="">--市--</option>
            </select>
            <select class="form-select col-4" name="county">
              <option value="">--县--</option>
            </select>
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-form-label col-3">头像：</label>
          <div class="col-9">
            <figure class="figure">
              <input type="file" id="upload" />
              <img src="./imgs/default.jpg" class="figure-img img-fluid rounded" alt="..." />
              <figcaption class="figure-caption">修改头像</figcaption>
            </figure>
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-3"></label>
          <div class="col-9">
            <button class="btn btn-primary">保存</button>
          </div>
        </div>
      </form>
    </div>

    <script src="./lib/bootstrap.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/form-value.js"></script>
    <!-- 自己的 JS -->
    <script src="./lib/common.js"></script>
    <script>
      (async function () {
        const { data :res} = await axios.get('/user/info')
        document.querySelector('#username').value = res.data.username
          if (res.data.avatar) {
            document.querySelector('img').src = res.data.avatar
          }
          if (res.data.province && res.data.city && res.data.county) {
            let a1 = axios.get('/api/city',{params:{pname:res.data.province}})
            let a2 = axios.get('/api/county',{params:{pname:res.data.province,cname:res.data.city}})
            const [{data:shi}, {data:xian}] = await Promise.all([a1,a2])
            let arrOne = [`<option value="">--市--</option>`]
            shi.forEach(item => arrOne.push(`<option value="${item}">${item}</option>`))
            city.innerHTML = arrOne.join('')

            let arrTwo = [`<option value="">--县--</option>`]
            xian.forEach(item => arrTwo.push(`<option value="${item}">${item}</option>`))
            county.innerHTML = arrTwo.join('')
            province.value = res.data.province
            city.value = res.data.city
            county.value = res.data.county
          }
      })();

      document.querySelector('figcaption').addEventListener('click',function() {
        document.querySelector('#upload').click()
      })
      document.querySelector('#upload').addEventListener('change',async function() {
        if (this.files.length > 0) {
          let fileObj = this.files[0]
          let fd = new FormData()
          fd.append('avatar',fileObj)
          const {data:res} = await axios.post('/user/avatar',fd)
          document.querySelector('img').src =res.data
        }
      })

      let province = document.querySelector('[name=province]')
      let city = document.querySelector('[name=city]')
      let county = document.querySelector('[name=county]')
      ;(async function () {
        const {data:res} = await axios.get('/api/province')
        let arr = [`<option value="">--省--</option>`]
        res.forEach(item => arr.push(`<option value="${item}">${item}</option>`))
        province.innerHTML = arr.join('')
      })()
      province.addEventListener('change',async function() {
        county.innerHTML = `<option value="">--县--</option>`
        if (this.value === '') {
          city.innerHTML = `<option value="">--市--</option>`
          city.innerHTML = arr.join('')
          return
        }
        const {data:res} = await axios.get('/api/city',{params:{pname:this.value}})
        let arr = [`<option value="">--市--</option>`]
        res.forEach(item => arr.push(`<option value="${item}">${item}</option>`))
        city.innerHTML = arr.join('')
      })
      city.addEventListener('change',async function () {
        if (this.value === ''){
          county.innerHTML = `<option value="">--县--</option>`
          return
        }
        const {data:res} = await axios.get('/api/county',{params:{pname:province.value,cname:city.value}})
        let arr =[`<option value="">--县--</option>`]
        res.forEach(item => arr.push(`<option value="${item}">${item}</option>`))
        county.innerHTML = arr.join('')
      })
      document.querySelector('button').addEventListener('click',async function (e) {
        e.preventDefault()
        let data = val(document.querySelector('form'))
        const {data:res} = await axios.post('/user/info',data)
        if (res.statua === 0) {
          alert(res.message)
        }
      })
    </script>
  </body>
</html>
